<template>
    <Menu class="nav-left" active-name="/index" width="auto" :open-names="['/index']" @on-select="routeTo">
        <Submenu class="nav-left-sub" :name="memu.path" v-for="memu in memuTree" :key="memu.path">
            <template slot="title">
                <Icon :type="memu.icon"></Icon>
                {{memu.text}}
            </template>
            <Menu-item class="nav-left-subitem" v-for="submemu in memu.subMemu" :key="submemu.path" :name="submemu.path">{{submemu.text}}</Menu-item>
        </Submenu>
    </Menu>
</template>
<script>
export default {
    data() {
        return {
        };
    },
    props: {
        memuTree: {
            type: Array,
            required: true,
        },
    },
    methods: {
        routeTo(name) {
            this.$router.push(name);
        },
    },
};
</script>

<style lang="less">
.nav-left {
    background: transparent;
    &.ivu-menu-vertical.ivu-menu-light:after {
        width: 0;
    }
    .nav-left-sub {
        &.ivu-menu-opened .ivu-menu-submenu-title {
            background: #497FAE;
        }
        .ivu-menu-submenu-title {
            color: #C9DFF5 !important;
            border-top: 1px solid #4a83b6;
            font-size: 14px;
            padding: 10px 15px;
            &:hover {
                background: #497FAE;
                color: #C9DFF5;
            }
        }
        .nav-left-subitem {
            color: #C9DFF5 !important;
            font-size: 14px;
            padding: 6px 15px 6px 43px;
            &:hover {
                background: #397FAE!important;
                color: #C9DFF5;
            }
        }
    }
}
</style>
